<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id="btn">获取歌手信息</button>
    <div id="app">
        <ul id="list">

        </ul>
    </div>
    <script>
        let newData = []
        let btn = document.getElementById('btn')//获取按钮
        btn.addEventListener('click', () => {//click表示鼠标按下的点击事件
            //获取歌手信息
            getData().then(() => {
                renderList(newData)
            })
        })
        function getData() {
            return new Promise((resolve, reject) => {
                const xhr = new XMLHttpRequest()  //创建异步对象
                //准备请求的参数,第一个参数是内定的不能变，
                // 第二个参数就是获取信息的地址，也就是后端将数据封装成的网站，
                // ture表示异步代码，如果是false就是同步代码
                xhr.open('GET', 'https://mock.mengxuegu.com/mock/66585c4db462b81cb3916d3e/songer/songer', true)
                xhr.send() //发送请求
                //监测请求发送的结果
                xhr.onreadystatechange = function () {
                    if (xhr.readyState == 4 && xhr.status == 200) {//请求成功
                        //xhr.status为状态码
                        let data = JSON.parse(xhr.responseText)//xhr.responseText获取到的数据为JSON字符串格式的
                        //JSON.parse再将JSON字符串格式的数据转换成JSON对象
                        console.log(data.data);
                        newData = data.data
                        resolve()
                    }
                }
            })
        }
        function renderList(arr) {
            let list = document.getElementById('list')
            for (let i = 0; i < arr.length; i++) {
                let item = arr[i]
                let li = document.createElement('li')
                li.innerText = `${item.name}--${item.songsCount}`
                list.appendChild(li)
            }
        }

    </script>
</body>

</html>